<div class="relative isolate sm:pt-32">
    <%= render AzimuttWeb.PartialsView, "_bg_grid.html" %>
    <%= render AzimuttWeb.PartialsView, "_bg_gradient_light.html" %>
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-xl sm:text-center">
            <h2 class="text-lg font-semibold leading-8 tracking-tight text-indigo-600"><%= @section %></h2>
            <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><%= @title %></p>
        </div>
        <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm leading-6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
            <figure class="col-span-2 hidden sm:block sm:rounded-2xl sm:bg-white sm:shadow-lg sm:ring-1 sm:ring-gray-900/5 xl:col-start-2 xl:row-end-1">
                <a href={@center.url} target="_blank" rel="noopener noreferrer" class="p-12 block text-xl font-semibold leading-8 tracking-tight text-gray-900">
                    <p>“<%= @center.text %>”</p>
                </a>
                <figcaption class="flex items-center gap-x-4 border-t border-gray-900/10 py-4 px-6">
                    <img class="h-10 w-10 flex-none rounded-full bg-gray-50" src={@center.author.avatar} alt={@center.author.name}>
                    <div class="flex-auto">
                        <div class="font-semibold"><%= @center.author.name %></div>
                        <div class="text-gray-600"><%= @center.author.description %></div>
                    </div>
                </figcaption>
            </figure>
            <div class="space-y-8 xl:contents xl:space-y-0">
                <div class="block sm:hidden">
                    <%= render "_testimonials_item.html", testimonial: @center %>
                </div>
                <div class="space-y-8 xl:row-span-2">
                    <%= for testimonial <- @left do %>
                        <%= render "_testimonials_item.html", testimonial: testimonial %>
                    <% end %>
                </div>
                <div class="space-y-8 xl:row-start-1">
                    <%= for testimonial <- @center_left do %>
                        <%= render "_testimonials_item.html", testimonial: testimonial %>
                    <% end %>
                </div>
            </div>
            <div class="space-y-8 xl:contents xl:space-y-0">
                <div class="space-y-8 xl:row-start-1">
                    <%= for testimonial <- @center_right do %>
                        <%= render "_testimonials_item.html", testimonial: testimonial %>
                    <% end %>
                </div>
                <div class="space-y-8 xl:row-span-2">
                    <%= for testimonial <- @right do %>
                        <%= render "_testimonials_item.html", testimonial: testimonial %>
                    <% end %>
                </div>
            </div>
        </div>
    </div>
</div>
